<template>
  <el-card>
    <el-row>
      <el-form :model="state" :inline="true">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="state.userName" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="state.nickName" placeholder="请输入昵称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getUserListFun">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="searchDiv">
      <el-button v-if="hasPer('user:add')" type="primary" icon="Plus" @click="editUserFun">新增</el-button>
      <el-button v-if="hasPer('user:export')" type="warning" plain icon="Download" @click="handlerExport">导出</el-button>
    </el-row>
    <el-table :data="state.tableData" row-key="id" :border="true">
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="昵称" prop="nickName" align="center"></el-table-column>
      <el-table-column label="手机号码" prop="phoneNumber" align="center"></el-table-column>
      <el-table-column label="角色" prop="roles" align="center"></el-table-column>
      <el-table-column label="账号注册类型" prop="registerType" width="130" align="center"></el-table-column>
      <el-table-column label="状态" prop="enabled" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.enabled == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" prop="option" width="240px" align="center">
        <template #default="scope">
          <span v-if="scope.row.roleIds[0] !== '1'">
            <el-button v-if="hasPer('user:enabled')" :type="buttonType(scope.row.enabled)"
                        @click="enabledUserFun(JSON.parse(JSON.stringify(scope.row)))">
              {{scope.row.enabled == 1 ? '停用' : '启用'}}
            </el-button>
            <el-button v-if="hasPer('user:edit')" type="primary" @click="editUserFun(JSON.parse(JSON.stringify(scope.row)))">编辑</el-button>
            <el-button v-if="hasPer('user:del')" type="danger" @click="deleteUser(scope.row.userId, scope.row.username)">删除</el-button>
          </span>
          <span v-else>
            <el-button v-if="hasPer('user:enabled')" :type="buttonType(scope.row.enabled)" disabled>{{scope.row.enabled == 1 ? '停用' : '启用'}}</el-button>
            <el-button v-if="hasPer('user:edit')" type="primary" disabled>编辑</el-button>
            <el-button v-if="hasPer('user:del')" type="danger" disabled>删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination v-model:current="state.current" v-model:size="state.size" v-model:total="state.total" @get-list="getUserListFun"></pagination>
  </el-card>
  <!--编辑-->
  <edit-user v-model:dialog-visible="dialogVisible" :user-obj="state.userObj" @get-list="getUserListFun"></edit-user>
</template>

<script setup>
import editUser from "./editUser";
import Pagination from "../../components/Pagination";
import {getUserList, delUser, enabledUser} from "../../api/user/sysUser";
import {errorMsg, infoMsg, successMsg} from "../../utils/message";
import {hasPer,parseTime} from "../../utils/common";
import {useStore} from "../../store";
import {onMounted, reactive, ref} from "vue";
import {ElMessageBox} from "element-plus";
import { download } from "../../utils/request";

const store = useStore()

const state = reactive({
  userName: '',
  nickName: '',
  username: store.userInfo.username,
  tableData: [],
  userObj: {},
  current: 1,
  size: 10,
  total: 0
})

const dialogVisible = ref(false)

onMounted(() => {
  getUserListFun()
})

const getUserListFun = () => {
  const params = {
    userName: state.userName,
    nickName: state.nickName,
    size: state.size,
    currentPage: state.current
  }
  getUserList(params).then(res => {
    if (res.code == 200){
      state.tableData = res.data.records
      state.total = res.data.total
    }else{
      errorMsg(res.message)
    }
  })
}

const editUserFun = (row) => {
  dialogVisible.value = true
  state.userObj = row.userId ? row : {}
}

const handlerExport = () => {
  const data = {
    userName: state.userName,
    nickName: state.nickName
  }
  download('/sys/user/export', data, `${new Date().getTime()}.xlsx`)
}

const deleteUser = (userId, username) => {
  ElMessageBox.confirm('确定删除用户【' + username + '】？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delUser({userId: userId}).then(res => {
      if (res.code == 200){
        successMsg(res.message)
        getUserListFun()
      } else {
        errorMsg(res.message)
      }
    })
  }).catch(() => {
    infoMsg('操作已取消')
  })
}
//  启用/停用用户
const enabledUserFun = (row) => {
  const enable = row.enabled == 0?true:false
  const str = enable ? '启用' : '停用'
  const color = enable ? '#67C23A' : '#F56C6C'
  ElMessageBox.confirm('确定<span style="color: '+color+'">' + str + '</span>用户【' + row.nickName + '】？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true
  }).then(() => {
    enabledUser({userId: row.userId,enabled: row.enabled == 0?1:0}).then(res => {
      if (res.code == 200){
        successMsg(res.message)
        getUserListFun()
      } else {
        errorMsg(res.message)
      }
    })
  }).catch(() => {
    infoMsg('操作已取消')
  })
}

const buttonType = (type) => {
  if (type == '1'){
    return 'warning'
  } else {
    return 'success'
  }
}
</script>

<style scoped>

</style>